---
title: "Tooltips"
---

Tooltips can be set for Cells and Column Headers.

{% gridExampleRunner title="Tooltips" name="tooltips" /%}

The following [Column Definition](./column-definitions/) properties set Tooltips:

{% interfaceDocumentation interfaceName="ColDef" names=["tooltipField", "tooltipValueGetter","headerTooltip"] config={"description":"", "suppressTypes": ["ColDefField"]} /%}

## Custom Component

The grid does not use the browsers default tooltip, instead it has a rich HTML Tooltip Component. The default Tooltip Component can be replaced with a Custom Tooltip Component using `colDef.tooltipComponent`.

In the example below:

* `tooltipComponent` is set on the Default Column Definition so it applies to all Columns.
* `tooltipComponentParams` is set on the Athlete Column Definition to provide a Custom Property, in this instance setting the background color.

{% gridExampleRunner title="Custom Tooltip Component" name="custom-tooltip-component" /%}

{% includeMarkdoc file="tooltips/_component-interface-javascript.mdoc" /%}
{% includeMarkdoc file="tooltips/_component-interface-angular.mdoc" /%}
{% includeMarkdoc file="tooltips/_component-interface-react.mdoc" /%}
{% includeMarkdoc file="tooltips/_component-interface-vue.mdoc" /%}

{% if isFramework("javascript", "angular", "vue") %}
{% interfaceDocumentation interfaceName="ITooltipParams" /%}
{% /if %}

{% if isFramework("react") %}
{% interfaceDocumentation interfaceName="CustomTooltipProps" /%}
{% /if %}

## Browser Tooltip

Set the grid property `enableBrowserTooltips=true` to stop using rich HTML Components and use the browsers native tooltip.

{% gridExampleRunner title="Default Browser Tooltip" name="default-tooltip" /%}

## Show and Hide Delay

Tooltips show after 2 seconds and hide after 10 seconds. Set `tooltipShowDelay` and `tooltipHideDelay` to override these values. The example below has `tooltipShowDelay=0` (shows immediatly) and `tooltipHideDelay=2000` (hides in 2,000 milliseconds, or 2 seconds).

{% gridExampleRunner title="Show Hide Delay" name="show-hide-delay" /%}

{% note %}
Setting delays will have no effect if using Browser Tooltips as Browser Tooltips are controlled by the browser and not the grid.
{% /note %}

## Blank Values

Tooltips are not shown for the missing values `undefined`, `null` and `""` (empty String). To display tooltips for missing values, provide a `tooltipValueGetter` to return something that is not empty.

In the example below:
* The data has missign values `undefined`, `null` and `''` (empty String) as the first three rows.
* Column A uses `tooltipField`, no tooltip is shown.
* Column B uses `tooltipValueGetter` to return an object, tooltip is shown.

{% gridExampleRunner title="Blank Values" name="blank-values" /%}

## Row Groups

The example below shows how to use the default tooltip component with group columns. Because the group column has no real field assigned to it, the `tooltipValueGetter` function must be used.

{% gridExampleRunner title="Row Group Tooltip" name="rowgroups-tooltip" /%}

## Mouse Tracking

The example below enables mouse tracking to demonstrate a scenario where tooltips need to follow the cursor. To enable this feature, set the `tooltipMouseTrack` to true in the gridOptions.

{% gridExampleRunner title="Tooltip Mouse Tracking" name="tooltip-mouse-tracking" /%}

## Interactive Tooltips

By default, it is impossible to click on tooltips and hovering them has no effect. If `tooltipInteraction=true` is set in the gridOptions, the tooltips will not disappear while being hovered and you will be able to click and select the text within the tooltip.

```js {% frameworkTransform=true %}
const gridOptions = {
    tooltipInteraction: true
}
```

The example below enables Tooltip Interaction to demonstrate a scenario where tooltips will not disappear while hovered. Note following:

* Tooltips will not disappear while being hovered.
* Tooltips content can be selected and copied.

{% gridExampleRunner title="Tooltip Interaction" name="tooltip-interaction" /%}

The example below shows Tooltip Interaction with Custom Tooltips. Note the following:

* Tooltip is enabled for the Athlete and Age columns.
* Tooltips will not disappear while being hovered.
* The custom tooltip displays a text input and a Submit button which when clicked, updates the value of the `Athlete` Column cell in the hovered row and then closes itself by calling `hideTooltipCallback()`.

{% gridExampleRunner title="Custom Tooltip Interaction" name="custom-tooltip-interaction" /%}
